<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<style>
		 .navbar-inverse .navbar-brand{
		 	color: #fff;
		 }
		 .fade .out{
		 	display: block;
		 }
		</style>
	</head>
	<body>
  
	<nav class="nav navbar-inverse navbar-fixed-top" style="filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9" role="navigation">
   	<div class="container">
	   		<div class="navbar-header">
	   	     <a href="#" class="navbar-brand">
	   	        <span class="glyphicon glyphicon-road"></span> <strong>囧途课堂</strong>
	   	     </a>
	   		</div>
	
		   	<ul class="nav navbar-nav">
		   			<li class="active"><a href="#">首页</a></li>
		   			<li><a href="#">囧文</a></li>
		   			<li><a href="#">文章</a></li>
		   	</ul>
	   		<div class="navbar-form navbar-right">
	   			<div class="form-group">	
		   			<div class="input-group">
		   				<input type="text" class="form-control" placeholder="搜索文章、教师或课程"  />
		   				<div class="input-group-btn">
		   					<button class="btn btn-block"><span class="glyphicon glyphicon-search"></span></button>
		   				</div>
		   			</div>	
	   			</div>
	   			<div class="form-group" style="padding-left: 10px; margin: 0px 12px;">
		   			<a href="#" style="color: #D2D2D2;">登录</a>
		   			<span  style="color: #D2D2D2;padding-left: 5px;">|</span>
		   			<a href="#" style="color: #D2D2D2;padding-left: 5px;">注册</a>
	   			</div>
	   		</div>	
   	  </div>
   </nav> 
<div style="height: 60px;"></div>
   <div class="container">
   	<div class="row">
   		<div class="col-md-6">
   		  <ul class="nav nav-tabs">
   		  	<li >
   		  		<a href='#xw1' data-toggle='tab'>新闻1</a>
   		  	</li>
   		  	<li class="active">
   		  		<a href='#xw2' data-toggle='tab'>新闻2</a>
   		  </li>
   		  </ul>
   		  <div class="tab-content">
   		  	<div class="tab-pane fade out" id="xw1">
   		  		<p><a href="#">1江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">1江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">1江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">1江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">1江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  	</div>
   		  	<div class="tab-pane fade in active" id="xw2">
   		  		<p><a href="#">2江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">2江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">2江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">2江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  		<p><a href="#">2江苏盐业集团原董事长王德善涉嫌严重违纪违法被查</a><span class="pull-right">2015-2-2</span></p>
   		  	</div>
   		  </div>
   		</div>
   	</div>
     <div class="row">
     	<div class="col-md-12">
     		<ul class="breadcrumb">
     			<li><a href="#">开发语言</a></li>
     			<li><a href="#" class="text-muted">web课程</a></li>
     		</ul>
     	</div>
     	<div class="col-md-6">
     	<div class="thumbnail">
	   	 	<img src="image/index(2)_03.png" />
	   	 	<div class="caption">
	   	 		<h3><a>bootstrp课程</a></h3>
	   	 		<p>共12课时</p>
	   	 	</div>
	   	 </div>
     	</div>
     	<div class="col-md-6">
     	<div class="thumbnail">
	   	 	<img src="image/index(2)_07.png" />
	   	 	<div class="caption">
	   	 		<h3><a>bootstrp课程</a></h3>
	   	 		<p>共12课时</p>
	   	 	</div>
	   	 </div>
     	</div>
     	
     	
     </div>
   
   </div>
  <script>
  	//$('#mytab a[href="#xw2"]').tab('show');
  	//$('#mytab a:first').tab('show');
  	//$('#mytab a:last').tab('show');
  	//$('#mytab li:eq(1) a').tab('show');
  	$('#mytab').on('shown.bs.tab',function(e){
  		var txt=$(e.target).attr('href');
  		
  		var prevtxt=$(e.relatedTarget).attr('href');
  		
  		$(txt).html($(prevtxt).html());
  	})
  </script>
  </body>
</html>
